import { IChatItem } from '@src/types/chat';
import { Avatar, Divider, Popconfirm, message } from 'antd';
import EmptyChat from '../EmptyChat';
import Markdown from '../Markdown';
import smartAiSvg from '/logo.svg';
// import { useHover } from 'ahooks';
import { CopyOutlined, DeleteOutlined } from '@ant-design/icons';
// import { useRef } from 'react';
import copy from 'copy-to-clipboard';
import { deleteMessage } from '@src/utils/chat';
import { useChatState } from '@src/store/chat/hooks';

interface IProps {
  chatItem: IChatItem;
  reGenerate?: (index: number) => void; // 重新生成消息
}

// 对话消息展示组件
const ChatMessage: React.FC<IProps> = ({
  chatItem = {} as IChatItem,
  reGenerate,
}: IProps) => {
  // const messageRef = useRef(null);
  // const isHovering = useHover(messageRef);
  const [chatId] = useChatState('chatId');
  const [isFetching] = useChatState('isFetching');
  const [, setCurChatItem] = useChatState('curChatItem');

  // 复制到剪切板
  const copyToClipboard = (value: string) => {
    try {
      copy(value);
      message.success('已成功复制到剪切板');
    } catch (error) {
      message.error('复制失败，请重试');
    }
  };

  const onDeleteClick = (index: number) => {
    const curItem = deleteMessage(index, chatId);
    setCurChatItem(curItem);
  };

  // 有消息就展示消息，没有就展示默认内容
  return (
    <div className='h-full w-[65%] my-3 px-2'>
      {chatItem.messages?.length ? (
        chatItem.messages.map((item, index) => {
          return (
            <div
              key={index}
              className='flex justify-start items-start mt-4'
              style={
                item.role === 'user' ? { flexDirection: 'row-reverse' } : {}
              }>
              <div className='px-5'>
                <Avatar
                  className='w-[40px] h-[40px]'
                  src={item.role === 'user' ? '' : smartAiSvg}>
                  无
                </Avatar>
              </div>
              <div>
                <div
                  className='border border-solid  border-gray-200 px-4 py-1 shadow-[0_1px_10px_rgba(8,26,81,0.05)] rounded-xl bg-gray-50'
                  style={
                    item.role === 'user'
                      ? {
                          backgroundColor: '#cedffa',
                          borderTopRightRadius: '3px',
                        }
                      : { borderTopLeftRadius: '3px' }
                  }>
                  <Markdown value={item.content} />
                  {isFetching && index === chatItem.messages.length - 1 && (
                    <div>
                      <span
                        className='animate-pulse cursor-default mt-1 text-gray-600'
                        style={{
                          animationDuration: '0.7s',
                        }}>
                        ▍
                      </span>
                    </div>
                  )}
                  {/* 工具部分 */}
                  {(!isFetching || index !== chatItem.messages.length - 1) &&
                    item.role === 'assistant' && (
                      <div>
                        <Divider className='my-[6px]' />
                        <div className='flex justify-between items-center'>
                          <div
                            onClick={() => reGenerate?.(index)}
                            className='text-xs font-bold text-blue-500 cursor-pointer md:text-sm flex items-center'>
                            重新生成
                          </div>
                          <div>
                            <CopyOutlined
                              onClick={() => copyToClipboard(item.content)}
                              className='cursor-pointer mr-[5px] text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
                            />
                            <Popconfirm
                              title='是否要删除当前会话'
                              onConfirm={() => onDeleteClick(index)}
                              okText='是'
                              cancelText='否'>
                              <DeleteOutlined className='cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' />
                            </Popconfirm>
                          </div>
                        </div>
                      </div>
                    )}
                </div>
              </div>
              {/* {isHovering && item.role === 'user' && (
                <div>
                  <CopyOutlined className='cursor-pointer mr-[5px] text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' />
                  <DeleteOutlined className='cursor-pointer text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' />
                </div>
              )} */}
            </div>
          );
        })
      ) : (
        <div className='w-full mt-[29%] mb-20'>
          <EmptyChat />
        </div>
      )}
    </div>
  );
};

export default ChatMessage;
